<template>
    <div class="contion">
        <div class="home">
            <div class="home_1">
                <span><b>我的</b></span>
            </div>
            <div class="my">
                <div class="my_1">
                    <img :src="user.img" class="image" @click="updateuser">
                    <div class="my_2">
                        <span>{{ user.username }}</span>
                        <span style="margin-top: 5px;">{{ user.phone }}</span>
                    </div>
                </div>
                <div class="my_3">
                    <span style="margin-left:40px;color:darkgray">常用</span>
                    <div class="my_4" @click="setting">
                        <el-icon class="my_4_1" :size="20"><Setting /></el-icon>
                            <!-- <van-icon name="setting-o" size="20" class="my_4_1"/> -->
                        <span style="margin-left:20px;margin-top:10px">设置</span>
                        <el-icon class="my_4_2" :size="20"><ArrowRight /></el-icon>
                    </div>
                    <div class="my_4">
                        <el-icon class="my_4_1" :size="20"><Bell /></el-icon>
                        <span style="margin-left:20px;margin-top:10px">通知</span>
                        <el-icon class="my_4_2" :size="20"><ArrowRight /></el-icon>
                    </div>
                    <div class="my_4">
                        <el-icon class="my_4_1" :size="20"><Clock /></el-icon>
                        <span style="margin-left:20px;margin-top:10px;">订购历史</span>
                        <van-icon name="arrow" size="20" class="my_4_3"/>
                    </div>
                </div>
                <div class="my_5">
                    <span style="margin-left:40px;color:darkgray">隐私安全</span>
                    <div class="my_4" @click="privacy">
                        <el-icon class="my_4_1" :size="20"><Lock /></el-icon>
                        <span style="margin-left:20px;margin-top:10px;">隐私政策</span>
                        <el-icon class="my_4_3" :size="20"><ArrowRight /></el-icon>
                    </div>
                    <div class="my_4" @click="article">
                        <el-icon class="my_4_1" :size="20"><Warning /></el-icon>
                        <span style="margin-left:20px;margin-top:10px;">条件条款</span>
                        <el-icon class="my_4_3" :size="20"><ArrowRight /></el-icon>
                    </div>
                </div>
            </div>
            <div class="home_6">
                <van-tabbar v-model="active" active-color="#ee0a24" fixed="true" class="h2">
                    <van-tabbar-item icon="wap-home-o" @click="home"/>
                    <van-tabbar-item icon="like-o" @click="like"/>
                    <div class="home_6_1">
                        <van-tabbar-item icon="shopping-cart-o" @click="cart" style="color:#FFFFFF;margin-top:10px"/>
                    </div>
                    <van-tabbar-item icon="comment-o" @click="message"/>
                    <van-tabbar-item icon="manager-o"/>
                  </van-tabbar>                  
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {useRouter} from 'vue-router'
import Article from "./Article.vue"

const router = useRouter()

const active = ref(4);

const like = () => {
    router.push('/like')
}
const cart = () => {
    router.push('/cart')
}
const home = () => {
    router.push('/home')
}
const message = () => {
    router.push('/message')
}

let user = ref({})

const datauser = () => {
    axios.get(`http://127.0.0.1:8000/home/user/?user=${localStorage.getItem('userid')}`).then(res=>{
        // console.log(res)
        user.value = res.data.data
    })
}

const setting = () =>{
    router.push('/setting')
}

const privacy = () =>{
    router.push('/privacy')
}
const article = () =>{
    router.push('/article')
}

const updateuser = () =>{
    router.push('/user')
}



onMounted(()=>{
    datauser()
})

</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.home{
    width: 600px;
    height: 850px;
    display: flex;
    flex-direction: column;
}

.home_1{
    padding-top: 20px;
    padding-bottom: 10px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
    background-color: #FFFFFF;
    border: #FFFFFF solid 0px;
    text-align: center;
    font-size:25px;
}

#app {
    position: relative;
    min-height: 100vh;
}

.van-tabbar {
    width: 80%; /* 设置标签栏宽度 */
    max-width: 600px; /* 最大宽度限制 */
    margin: 0 auto; /* 水平居中 */
    position: fixed; /* 固定定位，保持在底部 */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100; /* 确保在其他元素之上 */
    background-color: #FFFFFF;
}

.home_6_1{
    width: 50px;
    border-radius: 50px;
    background-color: #E44F32;
}


.image{
    width: 70px;
    height: 70px;
    border-radius: 50px;
    margin-right: 50px;
    margin-left: 30px;
}

.my{
    margin-top: 20px;
}

.my_1{
    display: flex;
    flex-direction: row;
    margin-bottom: 30px;
}

.my_2{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    font-size: 18px;
}

.my_3{
    margin-bottom: 20px;
}

.my_4{
    width: 500px;
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    margin-left: 50px;
    border-bottom: 1px solid darkgrey;
    padding-bottom: 10px;
}
.my_4_1{
    width: 20px;
    height: 20px;
    background-color:#9F9E9A0D;
    border-radius: 10px;
    padding: 15px;
}

.my_4_2{
    margin-top: 10px;
    margin-left: 370px;
}

.my_4_3{
    margin-top: 10px;
    margin-left: 335px;
}

</style>